<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>事件对象</title>
		<style>
			/* * {
				margin: 0;
				padding: 0;
				user-select: none;
			} */

			div {
				width: 200px;
				height: 500px;
				background-color: pink;
				position: absolute;
				left: 100px;
				top: 100px;
				user-select: none;
			}

			ul {
				width: 300px;
				/* height: 300px; */
				background-color: blue;
				margin: 50px;
				position: relative;
			}

			p {
				width: 150px;
				height: 150px;
				background-color: red;
			}

			.on {
				background-color: green;
			}

			li {
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
		</style>
	</head>

	<body style="height: 3000px;">

		<div class="box">
			<!-- <ul>
				<li class="on">111</li>
				<li>2222</li>
				<li>3333</li>
				<li>4444</li>
				<li>555 </li>
			</ul> -->
		</div>

		<a href="https://www.baidu.com">aaa</a>




		<script type="text/javascript">
			let oBox = document.querySelector('.box')
			// let bool = document.createElement('div').onmousewheel===null
			// let  event = bool?'mousewheel':'DOMMouseScroll'
			// document.addEventListener(event,function(e){
			// 	let detail = e.detail||-e.wheelDelta
			// 	if(detail>0){
			// 		console.log('往下');
			// 	}else{
			// 		console.log('往上');
			// 	}
			// })
			
			let bool = document.createElement('div').onmousewheel ===null
			let eventName = bool ?'mousewheel':'DOMMouseScroll'
			oBox.addEventListener(eventName,e=>{
				let detai = bool?e.wheelDelta/150:e.detail/-3
				e.preventDefault()
				console.log(detai);
			})

			//捕获  目标   冒泡
			/*
			1.事件对象 event
				#### 什么是事件对象
				事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。
				比如：  
				1. 谁绑定了这个事件。
				2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
				3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。
				e.target 触发事件的对象
				e.type      事件类型
				
				e.preventDefault()   阻止默认行为
				
				e.clientX    
				e.clientY
				点击位置距离当前body可视区域的x，y坐标。
				可以理解为距离浏览器窗口的距离，但注意这里不包括浏览器的导航栏距离只是浏览器内容区域。
				e.pageX
				e.pageY
				对于整个页面来说，包括了被卷去的body部分的长度
				相对于文档边缘,包含滚动条距离
				e.offsetX
				e.offsetY
				相对与自身的左上角  xy 的距离
				e.screenX
				e.screenY
				点击位置距离当前电脑屏幕的x，y坐标

				
			
				
			2.DOM事件级别：
			DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。
			而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。
			因为1级DOM标准并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型
			
			DOM0 
				DOM0级事件处理程序的缺点在于一个处理程序无法同时绑定多个处理函数，
				比如我还想再点击按钮事件上加上另外一个函数。
				oDiv.onclick =function(){
					
				}
				oDiv.onclick ==null
			DOM2
				DOM2级事件定义了 addEventListener 和 removeEventListener 两个方法，
				oDiv.addEventListener('click',fn)
				oDiv.removeEventListener('click',fn)
				function fn(){
					console.log(55555)
				}
				分别用来绑定和解绑事件，方法中包含三个参数，分别是绑定的事件处理的属性名称
				（没有on前缀）处理函数和是否在捕获时候执行事件处理函数
				 为true时捕获，false时冒泡。
			DOM3
				DOM3 级事件在 DOM2 级事件的基础上添加了更多的事件类型，全部类型如下：
				UI事件，当用户与页面上的元素交互时触发，如：load、scroll
				焦点事件，当元素获得或失去焦点时触发，如：blur、focus
				鼠标事件，当用户通过鼠标在页面执行操作时触发如：click、dbclick、mouseup
				滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
				文本事件，当在文档中输入文本时触发，如：textInput
				键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keyup、keypress
				合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
				变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
				
				
			鼠标拖拽
			按键移动	
				
				
			3.事件冒泡  
				事件流    DOM事件的三个阶段 捕获->目标->冒泡
				e.target 和 this 的区别
				-  this 是事件绑定的元素（绑定这个事件处理函数的元素） 。
				-  e.target 是事件触发的元素。
				e.stopPropagation()   阻止冒泡
			事件冒泡本身的特性，会带来的坏处，也会带来的好处。
			坏处 不该被触发的被触发
			好处 事件委托  给父元素注册事件，利用事件冒泡，当子元素的事件触发，
			会冒泡到父元素，然后去控制相应的子元素。
			
			4.滚轮事件的兼容
			再谷歌浏览器   滚轮事件 是 mousewheel  在火狐浏览器 是 DOMMouseScroll
			
			监听滚轮上下滚动   
			火狐 通过   e.detail   如果为+3那就是 往下 如果为 -3 往上
			谷歌 通过  e.wheelDelta  如果 -150那就是往下  如果150往上
			
			完整兼容  
			
			let bool = document.createElement('div').onmousewheel===null
			let  event = bool?'mousewheel':'DOMMouseScroll'
			document.addEventListener(event,function(e){
				let detail = e.detail||-e.wheelDelta
				if(detail>0){
					console.log('往下');
				}else{
					console.log('往上');
				}
			})
			*/
		</script>
	</body>

</html>